<template>
  <div>
    <el-table
      ref="table"
      v-loading="loading"
      :data="tableList"
      height="400"
      border
      show-summary
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column
        label="hs编码"
        prop="hsCodeDesc"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="英文品名"
        prop="productNameEn"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="中文品名"
        show-overflow-tooltip
        prop="productName"
        align="center"
      ></el-table-column>
      <el-table-column label="材质" prop="material" align="center"></el-table-column>
      <el-table-column label="箱数" prop="cartonNumber" align="center"></el-table-column>
      <el-table-column label="申报数量" prop="declaredNum" align="center"></el-table-column>
      <el-table-column label="申报单价" prop="declaredUnitPrice" align="center"></el-table-column>
      <el-table-column label="申报总价" prop="declaredTotalPrice" align="center"></el-table-column>
      <el-table-column label="申报方式" prop="declaredMethod" align="center"></el-table-column>
      <el-table-column label="原产地" prop="placeOrigin" align="center"></el-table-column>
      <el-table-column
        label="用途"
        prop="categoryUse"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="生产商"
        prop="manufacturer"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="操作" width="160" align="center">
        <template #default="{ row }">
          <!-- <el-button text size="mini" @click="handleOpenPicture(row)">货箱图片</el-button> -->
          <el-button text size="small" @click="handleEdit(row)">修改</el-button>
          <el-button text size="small" @click="handleDelete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="success" size="small" @click="handleAddHS">增加</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          :disabled="multiple"
          size="small"
          @click="handleDelete"
        >
          删除
        </el-button>
      </el-col>
    </el-row>
    <!-- 新增 -->
    <el-dialog
      v-model="open"
      :title="title"
      append-to-body
      :before-close="cancel"
    >
      <el-form
        ref="xgform"
        :model="form"
        :rules="rules"
        size="small"
        inline
        label-width="80px"
        @selection-change="handleTableSelect"
      >
        <el-form-item label="hs编码">
          <el-input v-model="form.hsCodeDesc"></el-input>
        </el-form-item>
        <el-form-item label="英文品名" prop="productNameEn">
          <el-input v-model="form.productNameEn" @change="handleFanYi"></el-input>
        </el-form-item>
        <el-form-item label="品名描述" prop="productName">
          <el-input v-model="form.productName"></el-input>
        </el-form-item>
        <el-form-item label="材质" prop="material">
          <el-input v-model="form.material"></el-input>
        </el-form-item>
        <el-form-item label="申报数量" prop="declaredNum">
          <el-input v-model.number="form.declaredNum"></el-input>
        </el-form-item>
        <el-form-item label="申报单价" prop="declaredUnitPrice">
          <el-input v-model.number="form.declaredUnitPrice"></el-input>
        </el-form-item>
        <el-form-item label="申报总价" prop="declaredTotalPrice">
          <el-input :value="form.declaredTotalPrice" disabled />
        </el-form-item>
        <el-form-item label="申报方式" prop="declaredMethod">
          <el-input v-model="form.declaredMethod" />
        </el-form-item>
        <el-form-item label="箱数" prop="cartonNumber">
          <el-input v-model.number="form.cartonNumber" />
        </el-form-item>
        <el-form-item label="原产地" prop="placeOrigin">
          <el-input v-model="form.placeOrigin"></el-input>
        </el-form-item>
        <el-form-item label="用途" prop="categoryUse">
          <el-input v-model="form.categoryUse"></el-input>
        </el-form-item>
        <el-form-item label="生产商" prop="manufacturer">
          <el-input v-model="form.manufacturer"></el-input>
        </el-form-item>
        <el-form-item label="是否修改hsCode" label-width="150px">
          <el-checkbox @change="ckEdit"></el-checkbox>
        </el-form-item>
        <el-row>
          <el-col>
            <el-form-item label="图片">
              <el-upload
                ref="upload"
                class="upload-demo"
                action="#"
                multiple
                :auto-upload="false"
                :limit="3"
                :file-list="fileList"
                :on-remove="handleRemove"
                :on-change="handleFileChange"
                accept=".jpg, .png"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div class="el-upload__tip">
                  只能上传jpg/png文件，且不超过500kb
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col>
            <div>
              <ul class="el-upload-list el-upload-list--picture-card">
                <li v-for="img in form.categoryImgs" :key="img.serialNo" class="el-upload-list__item is-ready">
                  <img
                    w-full
                    :src="img.categoryImage"
                    @click="handlePictureCardPreview({ file: img.categoryImage })"
                  />
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div>
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button @click="cancel">关闭</el-button>
      </div>
    </el-dialog>
    <el-dialog v-model="dialogVisible" :close-on-click-modal="false" append-to-body>
      <img style="height: 100%;width: 100%;" :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, getCurrentInstance, defineProps } from 'vue'
import { ElButton, ElMessageBox, ElMessage, UploadProps } from 'element-plus'

import { getOrderCategory, safeguardByOrder, getOrderCategoryId } from '@/api/expressManager/orderList'

const { proxy } = getCurrentInstance() as any
const loading = ref(false)
const table = ref({})
const tableList = ref([])
const fileList = ref([])
const multiple = ref(true),
  xgform = ref(null),
  title = ref(null),
  {
    appContext: {
      config: {
        globalProperties: { $validateForm },
      },
    },
  } = getCurrentInstance()
const open = ref(false)
const dialogVisible = ref(false)
const dialogImageUrl = ref('')
const form = ref({
  orderNo: '',
  hsCodeDesc: '',
  productNameEn: '',
  productName: '',
  material: '',
  declaredNum: '',
  declaredUnitPrice: '',
  declaredTotalPrice: '0',
  numTotal: '',
  declaredMethod: '',
  cartonNumber: '',
  placeOrigin: '',
  categoryUse: '',
  manufacturer: '',
  categoryImgs: '',
})
const rules = {
  hsCode: [{ required: true, message: '必填', trigger: 'blur' }],
  productNameEn: [{ required: true, message: '必填', trigger: 'blur' }],
  productName: [{ required: true, message: '必填', trigger: 'blur' }],
  material: [{ required: true, message: '必填', trigger: 'blur' }],
  declaredNum: [
    { required: true, message: '必填', trigger: 'blur' },
    { type: 'number', message: '该值必须为数字', trigger: ['change', 'blur'] },
  ],
  declaredUnitPrice: [
    { required: true, message: '必填', trigger: 'blur' },
    { type: 'number', message: '该值必须为数字', trigger: ['change', 'blur'] },
  ],
  cartonNumber: [
    { required: true, message: '必填', trigger: 'blur' },
    { type: 'number', message: '该值必须为数字', trigger: ['change', 'blur'] },
  ],
}
const isEdit = ref(false)
const handleSelectionChange = () => {}
// 修改
const handleEdit = (row: { [key: string]: any }) => {
  open.value = true
  title.value = '修改信息'
  const ids = row.id
  // form.value = JSON.parse(JSON.stringify(row))
  getOrderCategoryId(ids).then(res => {
    const categoryImgs = res.data.categoryImgs
    if (categoryImgs.length > 0) {
      categoryImgs.forEach(el => {
        el.categoryImage = unescape(el.categoryImage)
      })
    }
    form.value = res.data
  })
}
const numTotal = () => {
  proxy.form.declaredTotalPrice = '0'
  if (proxy.form.declaredNum && proxy.form.declaredUnitPrice) {
    proxy.form.declaredTotalPrice = proxy.form.declaredNum * proxy.form.declaredUnitPrice
  }
  return proxy.form.declaredTotalPrice
}
// 增加
const handleDelete = () => {}
// 添加
const handleAddHS = () => {
  open.value = true
  title.value = '新增hs编码'
  // if(form.value.declaredNum && form.value.declaredUnitPrice){
  //   form.value.declaredTotalPrice = form.value.declaredNum * form.value.declaredUnitPrice;
  // }
  // return form.value.declaredTotalPrice;
}
const handleFanYi = () => {}
const ckEdit = (val) => {
  isEdit.value = val 
}
// const handlePictureCardPreview = (data) => {
//   dialogVisible.value = true
//   proxy.dialogImageUrl = data.file
// }
const handlePictureCardPreview: UploadProps['onPreview'] = (data) => {
  console.log(data.file)
  
  dialogImageUrl.value = data.file!
  dialogVisible.value = true
}
const handleFileChange = (file, fileList) => {
  fileList.value = fileList
}
const handleRemove = (file, fileList) => {
  fileList.value = fileList
}
const handleRemoves = () => {
  
}
// 确定
const submit = () => {
  $validateForm(xgform.value, () => {
    const formData = new FormData()
    form.value.orderNo = orderNos.value
    proxy.fileList.forEach(el => {
      formData.append('file', el.raw)
    })
    formData.append('sysOrderCategory', JSON.stringify(form.value))
    safeguardByOrder(formData, isEdit.value).then(res => {
      if (res.code == 200) {
        ElMessage.success(res.msg)
        // form.value = ''
        open.value = false
      }
    })
  })
}
const handleTableSelect = (rows: { [key: string]: any }[]) => {
  multiple.value = !rows.length
}
// 取消
const cancel = () => {
  open.value = false
  proxy.$refs.xgform.resetFields()
}
const orderNos = ref(undefined)
const init = () => {
  const data = orderNos.value
  loading.value = true
  getOrderCategory({ orderNo: data }).then(res => {
    if (res.code == 200) {
      tableList.value = res.data
      loading.value = false
      numTotal()
    } else {
      loading.value = false
    }
  }).catch(() => {
    loading.value = false
  })
}
defineExpose({
  init,
  orderNos,
})
</script>

<style lang="less" scoped>
.el-upload-list__item,
.is-ready {
  width: 70px;
  height: 70px;
}
</style>
